<template>
  <div class="view-container">
    <el-row :gutter="15">
      <el-col :span="5">
        <quote>表信息</quote>
        <el-scrollbar height="calc(100vh - 190px)">
          <nebula-table :columns="columns" :data="tableData" border header-row-class-name="header-row-class"
                        @db-click="doubleClick"></nebula-table>
        </el-scrollbar>
      </el-col>
      <el-col :span="19">
        <quote>表字段信息</quote>
        <el-scrollbar height="calc(100vh - 190px)">
          <nebula-table
              :columns="rowColumns"
              :data="rowTableData"
              :use-tool-bar="true"
              border
              header-row-class-name="header-row-class"
          >
            <template #empty>
              <el-empty description="请先选择表"></el-empty>
            </template>
            <template #head-toolbar>
              <el-button type="primary" size="small" @click="openPackage">生成</el-button>
            </template>
            <template #isNullable="scope">
              <dict-tag :options="dictValue.field_nullable" :values="scope.row.isNullable"></dict-tag>
            </template>
            <template #columnKey="scope">
              <dict-tag :options="dictValue.filed_key" :values="scope.row.columnKey"></dict-tag>
            </template>
          </nebula-table>
        </el-scrollbar>
      </el-col>
    </el-row>
    <el-dialog v-model="showPackageName" title="包名">
      <div class="view-container">
        <el-form label-width="auto">
          <el-form-item label="包名">
            <el-input v-model="genCodeParam.packageName" placeholder="请输入包名"/>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <el-button @click="packageCancel">取消</el-button>
        <el-button type="primary" @click="packageSubmit">确定</el-button>
      </template>
    </el-dialog>
    <el-dialog v-model="showCode" width="80%" top="15px" title="代码预览">
      <el-row :gutter="15" style="height:80vh;margin: 0">
        <el-col :span="6" style="margin: 0;height: 100%;padding: 0">
          <div style="height: 30px;padding: 8px 15px">
            <el-button type="primary" size="small" @click="downloadCode">下载</el-button>
          </div>
          <div style="height: calc(100% - 30px)">
            <el-scrollbar height="100%">
              <div class="file-list">
                <ul style="padding: 0">
                  <li v-for="(item,index) in fileNameList" :key="index"
                      :class="{ 'file-name': currentFile!== item, 'file-name-select': currentFile === item }"
                      @click="changeFile(item)" style="list-style: none;">
                    {{ item }}
                  </li>
                </ul>
              </div>
            </el-scrollbar>
          </div>
        </el-col>
        <el-col :span="18" style="margin: 0;height: 100%;padding: 0">
          <code-preview :value="codeValue" :language="currentFile==='mapperXml'?'xml':'java'"
                        theme="vs-dark"></code-preview>
        </el-col>
      </el-row>
    </el-dialog>
    <!--        <el-layer v-model="showCode" :area="['80vw', '80vh']" title="代码预览">-->
    <!--            <el-row :space="15" style="height: calc(80vh - 57px);margin: 0">-->
    <!--                <el-col :md="6" style="margin: 0;height: 100%;padding: 0">-->
    <!--                    <div style="height: 30px;padding: 8px 15px">-->
    <!--                        <el-button type="primary" size="xs" @click="downloadCode">下载</el-button>-->
    <!--                    </div>-->
    <!--                    <div style="height: calc(100% - 30px)">-->
    <!--                        <el-scroll height="100%" style="background-color: #fff" thumbColor="#c9c9c9">-->
    <!--                            <div class="file-list">-->
    <!--                                <ul>-->
    <!--                                    <li v-for="(item,index) in fileNameList" :key="index"-->
    <!--                                        :class="{ 'file-name': currentFile!== item, 'file-name-select': currentFile === item }"-->
    <!--                                        @click="changeFile(item)">-->
    <!--                                        {{ item }}-->
    <!--                                    </li>-->
    <!--                                </ul>-->
    <!--                            </div>-->
    <!--                        </el-scroll>-->
    <!--                    </div>-->
    <!--                </el-col>-->
    <!--                <el-col :md="18" style="margin: 0;height: 100%;padding: 0">-->
    <!--                    <code-preview :value="codeValue" :language="currentFile==='mapperXml'?'xml':'java'"-->
    <!--                                  theme="vs-dark"></code-preview>-->
    <!--                </el-col>-->
    <!--            </el-row>-->
    <!--        </el-layer>-->
  </div>
</template>
<script setup>
import {onMounted} from "vue";
import {genDomain, getTableColumns, getTableName} from "@/api/gen.js";
import CodePreview from "@/components/CodePreview.vue";
// import {layer} from "@layui/layui-vue";
import DownloadUtil from "@/util/downloadUtil.js";
import {getDict} from "@/util/dict.js";
import DictTag from "@/components/DictTag.vue";
import NebulaTable from "@/components/NebulaTable.vue";
import Quote from "@/components/Quote.vue";
import {ElMessage} from "element-plus";

const dicts = ["field_nullable", "filed_key"]


const proxy = getCurrentInstance();
const dictValue = ref({})
const columns = [
  {title: "表名", key: "tableName", align: 'center'},
  {title: "注释", key: "tableComment", align: 'center'},
]
const tableData = ref([])

const getTableList = () => {
  getTableName().then(res => {
    tableData.value = res.data
  })
}

const rowColumns = [
  {title: "表名", key: "tableName", align: 'center'},
  {title: "列名", key: "columnName", align: 'center'},
  {title: "注释", key: "columnComment", align: 'center'},
  {title: "可空", key: "isNullable", align: 'center', customSlot: 'isNullable'},
  {title: "默认值", key: "columnDefault", align: 'center'},
  {title: "列类型", key: "columnType", align: 'center'},
  {title: "键", key: "columnKey", align: 'center', customSlot: 'columnKey'},
]

const rowTableData = ref([])

const currentTable = ref("");

const currentFile = ref("")

const doubleClick = (row) => {
  console.log(row)
  currentTable.value = row.tableName
  let param = {
    tableName: row.tableName
  }
  getTableColumns(param).then(res => {
    rowTableData.value = res.data
  })
}

const genCodeParam = ref({
  tableName: '',
  packageName: ''
})

const codeValue = ref("hello world")

const showPackageName = ref(false)

const openPackage = () => {
  if (currentTable.value) {
    showPackageName.value = true
    genCodeParam.value.tableName = currentTable.value
  } else {
    // layer.msg("请选择表后生成", {icon: 2, time: 1000})
  }
}
const packageCancel = () => {
  showPackageName.value = false
}

const packageSubmit = () => {
  if (genCodeParam.value.packageName) {
    genCode()
    showPackageName.value = false
  } else {
    ElMessage({
      message: '请输入包名',
      type: 'warning',
    })
  }
}
const action = ref([
  {
    text: "确认",
    callback: () => {
      if (genCodeParam.value.packageName) {
        genCode()
        showPackageName.value = false
      } else {
        // layer.msg("请输入包名", {icon: 2, time: 1000})
      }
    }
  },
  {
    text: "取消",
    callback: () => {
      showPackageName.value = false
    }
  }
])
const genCodeResult = ref({})
const showCode = ref(false)

const fileNameList = ref([])

const genCode = () => {
  genDomain(genCodeParam.value).then(res => {
    genCodeResult.value = res.data
    fileNameList.value = Object.keys(genCodeResult.value);
    showCode.value = true
    currentFile.value = fileNameList.value[0]
    codeValue.value = genCodeResult.value[currentFile.value]
  });
}

const changeFile = (item) => {
  currentFile.value = item
  codeValue.value = genCodeResult.value[item]
}

const downloadCode = () => {
  DownloadUtil.download("/gen/downloadCode", 'code.zip', genCodeParam.value)
}

onMounted(() => {
  getTableList()
  dictValue.value = getDict({type: {dicts}})

})
</script>
<style>
.file-list{
  padding-right: 15px;
}
.file-name {
  padding: 5px;
  cursor: pointer;
}

.file-name:hover {
  background-color: var(--el-color-primary-light-9);
}

.file-name-select {
  padding: 5px;
  cursor: pointer;
  background-color: var(--el-color-primary);
  color: var(--el-color-primary-light-9);
}
</style>
